<template>
	<view class="base-page">
		<view class="" style="flex: 1; overflow-y: auto; padding-bottom: 100px;">
			<u--form labelPosition="left" labelWidth="80">
				<view class="page_conten_title">
					<view class="yangsf-m-l-20">借款人信息</view>
				</view>
				<view class="yangsf-padding-lr-20">
					<u-form-item label="出借人姓名" borderBottom ref="item1">
						<u--input v-model="contract.creditor" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>
					<u-form-item label="身份证号" borderBottom ref="item1">
						<u--input v-model="contract.creditorCardNo" border="none" inputAlign="right"
							readonly></u--input>
					</u-form-item>
					<!-- <u-form-item label="出借人电话" borderBottom ref="item1">
						<u--input v-model="contract.creditorTele" border="none" inputAlign="right" readonly></u--input>
					</u-form-item> -->
					<u-form-item label="借款人姓名" borderBottom ref="item1">
						<u--input v-model="contract.debtor" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>
					<u-form-item label="身份证号" borderBottom ref="item1">
						<u--input v-model="contract.debtorCardNo" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>
					<!-- <u-form-item label="借款人电话" borderBottom ref="item1">
						<u--input v-model="contract.debtorTele" border="none" inputAlign="right" readonly></u--input>
					</u-form-item> -->
				</view>
				<view class="page_conten_title">
					<view class="yangsf-m-l-20">借款信息</view>
				</view>
				<view class="yangsf-padding-lr-20">
					<u-form-item label="合同类型" borderBottom ref="item1">
						<u--input v-model="contract.stages > 1 ? '分期借条' : '极速借条'" border="none" inputAlign="right"
							readonly></u--input>
					</u-form-item>
					<u-form-item label="借款金额" borderBottom ref="item1">
						<u--input v-model="contract.money" type="number" border="none" inputAlign="right"
							readonly></u--input>
					</u-form-item>
					<u-form-item label=" 年化利率" borderBottom ref="item1">
						<u--input v-model="contract.moneyRate" type="number" border="none" inputAlign="right" readonly>
							<u--text text="%" slot="suffix" margin="0 3px"></u--text>
						</u--input>
					</u-form-item>
					<u-form-item label="借款日期" borderBottom ref="item1">
						<u--input v-model="contract.loanDate" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>

					<template v-if="contract.stages > 1">
						<u-form-item label="还款期数" borderBottom ref="item1">
							<u--input :value="contract.stages + '期，每期' + contract.stageDays + '天'" border="none"
								inputAlign="right" readonly></u--input>
						</u-form-item>
					</template>
					<template v-else>
						<u-form-item label="还款日" prop="repayment" borderBottom ref="item1">
							<u--input v-model="contract.repayment" border="none" inputAlign="right" readonly></u--input>
						</u-form-item>
					</template>
				</view>

				<view class="page_conten_title yangsf-flex-justify-content-space-between">
					<view class="yangsf-m-l-20">还款总金额({{ contract.stages > 1 ? '等额本息' : '一次性还清' }})</view>
					<view class="yangsf-m-r-20">{{contract.totalMoney}}</view>
				</view>
				<u-line></u-line>

				<template v-if="contract.stages > 1">
					<view class="page_conten_title">
						<view class="yangsf-m-l-20">分期还款详情</view>
					</view>
					<table class="repayment-table">
						<thead>
							<tr>
								<th>期数</th>
								<th>还款日期</th>
								<th>还款金额</th>
								<th>还款状态</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in contract.stageList" :key="index">
								<td>{{ item.level }}</td>
								<td>{{ item.expireDate }}</td>
								<td>{{ item.money }}</td>
								<td>
									<span v-if="!contract.contractStatus || contract.contractStatus<= 2">
										--
									</span>
									<span v-else>
										<span v-if="item.status == 1" style="color:#909399">履约中</span>
										<span v-else-if="item.status == 2" style="color:#fcbd71">已逾期</span>
										<span v-else-if="item.status == 3" style="color: #19be6b">已完结</span>
									</span>
									<!-- {{item.status}} -->

								</td>
							</tr>
						</tbody>
					</table>
					<u-line></u-line>
				</template>

				<view class="yangsf-padding-lr-20">
					<u-form-item label="借款用途" borderBottom ref="item1">
						<u--input :value="displayPurpose" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>
					<u-form-item label="合同备注" prop="remark" borderBottom ref="item1">
						<view class="">
							{{contract.remark}}
						</view>
					</u-form-item>
					<u-form-item v-if="contract.contractStatus>=2" label="借款协议" borderBottom ref="item1"
						@click="seeSign()">
						<u--input value="查看协议" border="none" inputAlign="right" readonly></u--input>
					</u-form-item>
				</view>

				<!-- <view class="page_conten_title yangsf-flex-justify-content-space-between" @click="seeSign()">
					<view class="yangsf-m-l-20">借款协议</view>
					<view class="yangsf-m-r-20" >查看协议</view>
				</view> -->

			</u--form>
		</view>

		<view class="fx_overlay" v-if="showFx" @click="showFx = false">
			<view class="fx_page" @click.stop>
				<view class="fx_page_1">
					<image src="/static/img/share.png"></image>
				</view>

				<view class="fx_page_2">
					<view class="fx_page_2_title">
						分享给朋友进行签约
					</view>
					<view class="fx_page_2_content">
						<view class="yangsf-m-t-20 yangsf-m-l-20">
							<view class="fx_page_2_content_title">
								出借人：<span>{{contract.creditor}}</span>
							</view>
							<view class="fx_page_2_content_title yangsf-m-t-10">
								借款人：<span>{{contract.debtor}}</span>
							</view>
							<view class="fx_page_2_content_text yangsf-m-t-10">
								借款金额：<span class="money">{{contract.money}}元</span>
							</view>
							<view class="fx_page_2_content_text yangsf-m-t-10">
								借款利率：<span>{{contract.moneyRate}}%</span>
							</view>
						</view>
					</view>

					<view class="canvas">
						<!-- 二维码插件 width height设置宽高 -->
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>

					<!-- <view class="yangsf-ratio-w-100 yangsf-flex-row-center">
						<view class="fx_page_2_btn " @click="toDetails">
							<view class="">
								合同详情
							</view>
							<view class="yangsf-m-l-10">
								<u-icon name="arrow-right" size="18" color="#888888"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view v-if="contract && contract.contractStatus" class="yangsf-page-bottom-button yangsf-card">
			<!-- 合同状态： 0.作废 1.未发起 2.已发起 3.已签署 4.逾期 5.完结 -->
			<!-- 1. 如果是待签约状态contract.contractStatus==2，发起人可以删除与分享给好友，其他签约人只能有生成协议按钮 -->
			<view class="yangsf-flex-col-center" v-if="contract.contractStatus == 2 && member.id == contract.createId">
				<view class="yangsf-ratio-w-100 yangsf-flex yangsf-flex-justify-content-space-between">
					<view class="yangsf-ratio-w-30 yangsf-m-r-20">
						<u-button type="error" text="删除" @click="operate('1')"></u-button>
					</view>
					<view class="yangsf-ratio-w-70">
						<u-button type="primary" text="分享给好友" @click="toPage"></u-button>
					</view>
				</view>
			</view>
			<view class="yangsf-flex-col-center"
				v-else-if="contract.contractStatus == 2 && member.id != contract.createId">
				<view class="yangsf-ratio-w-80">
					<u-button type="primary" text="生成协议" @click="checkPayStatus"></u-button>
				</view>
			</view>

			<!-- 2. 如果当前登录人不是发起人，contract.contractStatus > 2时，只有查看协议的按钮，contract.contractStatus < 2 无操作按钮 -->
			<view class="yangsf-flex-col-center"
				v-else-if="member.id != contract.createId && contract.contractStatus > 2">
				<view class="yangsf-ratio-w-80">
					<!-- <u-button type="primary" text="查看协议" @click="seeSign"></u-button> -->
					<u-button type="primary" text="返回列表" @click="toListPage"></u-button>
				</view>
			</view>

			<!-- 3. 当前人是出借人（假设发起人即出借人），contract.contractStatus == 3 || contract.contractStatus == 4，具有销账和查看协议的权限，contract.contractStatus == 5，具有删除和查看协议的权限，其他状态没有权限 -->
			<view class="yangsf-flex-col-center" v-else-if="member.id == contract.createId">
				<view v-if="contract.contractStatus == 3 || contract.contractStatus == 4" class="yangsf-ratio-w-100">
					<view class="yangsf-ratio-w-100 yangsf-flex yangsf-flex-justify-content-space-between">
						<view class="yangsf-ratio-w-30 yangsf-m-r-20">
							<u-button type="error" text="销账" @click="openRepaymentPopup"></u-button>
						</view>
						<view class="yangsf-ratio-w-70">
							<!-- <u-button type="primary" text="查看协议" @click="seeSign"></u-button> -->
							<u-button type="primary" text="返回列表" @click="toListPage"></u-button>
						</view>
					</view>
				</view>
				<view v-else-if="contract.contractStatus == 5" class="yangsf-ratio-w-100">
					<view class="yangsf-ratio-w-100 yangsf-flex yangsf-flex-justify-content-space-between">
						<view class="yangsf-ratio-w-30 yangsf-m-r-20">
							<u-button type="error" text="删除" @click="operate('3')"></u-button>
						</view>
						<view class="yangsf-ratio-w-70">
							<!-- <u-button type="primary" text="查看协议" @click="seeSign"></u-button> -->
							<u-button type="primary" text="返回列表" @click="toListPage"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="showModel" title="操作提示" showCancelButton="true" cancelText="取消" :content='modelContent'
			:closeOnClickOverlay="true" @confirm="confirmOper" @cancel="cancelOper" @close="cancelOper"></u-modal>

		<!-- 分期销账弹窗 -->
		<u-popup :show="showRepaymentPopup" @close="closeRepaymentPopup" mode="bottom" :round="10">
			<view class="repayment-popup">
				<view class="repayment-popup-title">选择销账期数</view>
				<scroll-view scroll-y style="max-height: 60vh;">
					<!-- <view class="stage-list">
						<view
							v-for="(stage, index) in contract.stageList"
							:key="index"
							v-if="stage.status > 0 && stage.status < 3"
							:class="['stage-item', stage.checked ? 'checked' : '']"
							@click="handleStageSelect(stage.level)"
						>
							<u-icon :name="stage.checked?'/static/icon/dx_z.png':'/static/icon/dx_w.png'"></u-icon>
							<text style="yangsf-m-l-20">第{{ stage.level }}期</text>
							<text style="yangsf-m-l-20">{{ stage.expireDate }}</text>
							<text style="yangsf-m-l-20">{{ stage.money }}元</text>
							<!-- <text v-if="stage.checked" class="checked-icon">✓</text> -->
					<!-- </view>
					</view> -->

					<table class="repayment-table">
						<thead>
							<tr>
								<th>状态</th>
								<th>期数</th>
								<th>还款日期</th>
								<th>还款金额</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(stage, index) in contract.stageList" :key="index"
								v-if="stage.status > 0 && stage.status < 3" @click="handleStageSelect(stage.level)">
								<td><u-icon size="26"
										:name="stage.checked?'/static/icon/dx_z.png':'/static/icon/dx_w.png'"></u-icon>
								</td>
								<td>{{ stage.level }}</td>
								<td>{{ stage.expireDate }}</td>
								<td>{{ stage.money }}</td>
							</tr>
						</tbody>
					</table>
				</scroll-view>
				<view class="repayment-popup-footer">
					<u-button type="default" @click="closeRepaymentPopup" style="width: 45%;">取消</u-button>
					<u-button type="error" @click="confirmRepayment"
						style="width: 45%; margin-left: 10px;">确定销账</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import wx from 'jweixin-module';
	// import wx from 'weixin-js-sd k';
	import uQRCode from '@/config/uqrcode.js';
	import {
		domain,
		logoUrl,
		purposes,
		sigeListUrl,
		shareUrl_sige
	} from '@/config/config';
	import {
		getBySignNo,
		getWxPayConfig,
		getPayStatus,
		addSign,
		getPreviewUrl,
		delSign,
		endSign,
		repayStages,
		getUserInfo,
		getWxConfig
	} from '@/config/api.js'
	export default {
		data() {
			return {
				isPay: 1,
				showFx: false, // 控制分享遮盖层显示隐藏
				content: '点击右上角菜单，分享给您的好友',
				shareUrl: '',

				operKind: 0, //删除
				showModel: false,
				modelContent: '确定要执行当前操作吗？',
				id: '',
				signNo: '',
				member: {},
				contract: {},
				contractStatusText: '',
				repaymentDetails: [],
				showRepaymentPopup: false, // 控制分期销账弹窗显示
				selectedStageLevel: null, // 存储选中的期数等级
				selectedStages: [], // 存储最终确定销账的期数ID
				qrcodeSize: 200,
				qrcodeSrc: ''
			}
		},
		computed: {
			displayPurpose() {
				if (!this.contract.purpose) {
					return '暂无';
				}
				const foundPurpose = purposes[0].find(p => p.value === this.contract.purpose);
				return foundPurpose ? foundPurpose.label : '暂无';
			},

		},
		created() {
			let url = window.location.href;
			console.log("created 分享页 ==> {}", url);
			let pamars = url.split("?")[1];
			let parts = pamars.split("&")
			for (let i = 0; i < parts.length; i++) {
				const pp = parts[i].split("=");
				if (pp && pp[0] == "id") {
					this.signNo = pp[1]
					console.log("分享页ID ==> {}", pp[1]);
				}
			}
			getUserInfo().then(res => {
				this.member = res.data
				console.log("member ==> {}", this.member);
				if (!this.member.memberType || this.member.memberType != 1 || !this.member.idCard) {
					uni.$u.toast("您还未实名认证，即将跳转首页")
					window.location.href = domain
					return
				}
				this.get();
			})
		},
		onShow() {
			let url = window.location.href;
			console.log("onShow 分享页 ==> {}", url);
			let pamars = url.split("?")[1];
			let parts = pamars.split("&")
			for (let i = 0; i < parts.length; i++) {
				const pp = parts[i].split("=");
				if (pp && pp[0] == "id") {
					this.signNo = pp[1]
					console.log("分享页ID ==> {}", pp[1]);
				}
			}
			getUserInfo().then(res => {
				this.member = res.data
				console.log("member ==> {}", this.member);
				if (!this.member.memberType || this.member.memberType != 1 || !this.member.idCard) {
					uni.$u.toast("您还未实名认证，即将跳转首页")
					window.location.href = domain
					return
				}
				this.get();
			})
		},
		mounted() {
			let url = shareUrl_sige + this.signNo
			let data = {
				url: url
			}
			getWxConfig(data).then(res => {
				this.shareUrl = res.data.url
				console.log("this.shareUrl  ==> {}", this.shareUrl);
				wx.config({
					debug: false, // 生产环境关闭
					appId: res.data.appId,
					timestamp: res.data.timestamp,
					nonceStr: res.data.nonceStr,
					signature: res.data.signature,
					jsApiList: [
						'onMenuShareAppMessage'
					] // 声明分享API
				});
				wx.ready(() => {
					this.wxShare(); // 配置分享内容
				});
				//错误了会走 这里
				wx.error(res => {
					console.log("微信分享错误信息", res);
				});
			})
		},
		methods: {
			wxShare() {
				let desc = '';
				if (this.contract.money && this.contract.moneyRate) {
					desc = '金额: ' + this.contract.money + ', 利率: ' + this.contract.moneyRate + '%';
				}
				console.log("分享描述信息 ==> {}", desc);
				let shareUrl = this.shareUrl
				console.log("this.shareUrl  ==> {}", shareUrl);
				// 分享给朋友
				wx.onMenuShareAppMessage({
					title: "我在友橙信给你打了一张借条，快来确认吧",
					desc: desc,
					link: shareUrl,
					imgUrl: logoUrl,
					success: () => {
						console.log('分享给朋友成功');
					}
				});
			},
			maskedIdNumber(idNumber) {
				// 保留第一位和最后两位，其余替换为 *
				let first = idNumber.slice(0, 1);
				let last = idNumber.slice(-2);
				let middleLength = idNumber.length - 3; // 减去首尾共3位
				let mask = '*'.repeat(middleLength);
				let res = first + mask + last;
				console.log("身份证加密 ==> {}", res);
				return res;
			},
			//查看协议
			seeSign() {
				let data = {
					contractNo: this.contract.billNo
				}
				getPreviewUrl(data).then(res => {
					if (res.data) {
						uni.$u.route('/pages/contract/sign', {
							pageUrl: res.data
						});
					} else {
						uni.$u.toast(res.msg)
					}
				})

			},
			get() {
				if (this.signNo) {
					let data = {
						id: this.signNo
					}
					getBySignNo(data).then(res => {
						if (res.code == 200) {
							if (this.member.idCard != res.data.creditorCardNo && this.member.idCard != res.data
								.debtorCardNo) {
								uni.$u.toast("该合同不属于您，请联系发起方重新发起")
								this.contract = {}
								// } else if (this.member.tele != res.data.creditorTele && this.member.tele != res
								// 	.data.debtorTele) {
								// 	uni.$u.toast("手机号不对应，暂无法操作，请联系发起方重新发起")
								// 	this.contract = {}

							} else {
								this.contract = res.data
								if (res.data.creditorCardNo) {
									this.contract.creditorCardNo = this.maskedIdNumber(res.data.creditorCardNo)
								}
								if (res.data.debtorCardNo) {
									this.contract.debtorCardNo = this.maskedIdNumber(res.data.debtorCardNo)
								}
								if (!this.contract.stages || this.contract.stages == 0) {
									this.contract.stages = 1
								}
								// 合同状态： 0.作废  2.待签署 3.履约中 4.已逾期 5.已完结
								switch (this.contract.contractStatus) {
									case 0:
										this.contractStatusText = '作废';
										break;
									case 2:
										this.contractStatusText = '待签署';
										break;
									case 3:
										this.contractStatusText = '履约中';
										break;
									case 4:
										this.contractStatusText = '已逾期';
										break;
									case 5:
										this.contractStatusText = '已完结';
										break;
									default:
										this.contractStatusText = '未知状态';
										break;
								}
								// 假设 repaymentDetails 包含每期的销账状态，需要将其与 stageList 关联
								if (res.data.stageList) {
									this.contract.stageList = res.data.stageList.map(stage => ({
										...stage,
										status: stage.status,
										checked: false
									}));
								}
								// } else {
								// 	uni.$u.toast("该合同不属于您，请联系发起方重新发起")
								// 	this.contract = {}

								// //设置分享信息
								// let desc = '金额: ' + this.contract.money + ', 利率: ' + this.contract.moneyRate;
								// this.wxShare(desc);
							}
						} else {
							uni.$u.toast(res.msg)
						}
					})
				}
			},
			// 打开分期销账弹窗
			openRepaymentPopup() {
				// 只有分期合同才显示销账弹窗
				if (this.contract.stages > 1) {
					this.showRepaymentPopup = true;
					this.selectedStages = []; // 每次打开清空已选
					this.contract.stageList.forEach((stage, index) => {
						this.$set(this.contract.stageList, index, {
							...stage,
							checked: false
						});
					});
				} else {
					this.operate('2'); // 非分期合同直接走原销账逻辑
				}
			},
			// 关闭分期销账弹窗
			closeRepaymentPopup() {
				this.showRepaymentPopup = false;
			},
			// 处理期数选择
			handleStageSelect(level) {
				console.log("选中的期数等级 ==> {}", level);
				this.selectedStageLevel = level; // 更新选中的期数等级

				// 清空之前的所有选中状态
				this.contract.stageList.forEach((stage, index) => {
					this.$set(this.contract.stageList, index, {
						...stage,
						checked: false
					});
				});

				// 选中当前期数以及所有小于当前期数且未销账的期数
				const tempSelectedStages = [];
				for (let i = 0; i < this.contract.stageList.length; i++) {
					const stage = this.contract.stageList[i];
					// 状态为1（履约中）或2（已逾期）的期数可以被选中
					if (stage.level <= level && (stage.status === 1 || stage.status === 2)) {
						this.$set(this.contract.stageList, i, {
							...stage,
							checked: true
						});
						tempSelectedStages.push(stage.id);
					} else if (stage.level > level) {
						// 大于当前选中期数的，取消选中
						this.$set(this.contract.stageList, i, {
							...stage,
							checked: false
						});
					}
				}
				this.selectedStages = tempSelectedStages; // 更新最终销账的期数ID列表
				console.log('最终确定销账的期数ID ==> {}', this.selectedStages);
			},
			// 确认销账
			confirmRepayment() {
				if (this.selectedStages.length === 0) {
					uni.$u.toast('请选择要销账的期数');
					return;
				}
				console.log('确定销账数据 ==> {}', this.selectedStages);
				uni.$u.toast('确定销账数据：==> {}', this.selectedStages);
				// 假设销账接口为 repayStages，需要根据实际接口调整
				let data = {
					id: this.contract.id,
					ids: this.selectedStages.join(",")
				}
				repayStages(data).then(res => {
					if (res.code == 200) {
						uni.$u.toast('销账成功');
						this.closeRepaymentPopup();
						this.get();
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					uni.$u.toast('销账失败');
				});
			},
			pay() {
				let data = {
					id: this.contract.id
				}
				getWxPayConfig(data).then(res => {
					console.log("获取微信支付参数 ==> {}", res.data);
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": res.data.appId, //公众号ID，由商户传入     
							"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": res.data.nonceStr, //随机串     
							"package": res.data.package,
							"signType": res.data.signType, //微信签名方式：     
							"paySign": res.data.paySign
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
								//查询订单状态，如果支付完成，则更新状态，刷新页面
								//this.checkPayStatus()
								uni.$u.toast("支付成功，即将返回合同列表")
								window.location.href = sigeListUrl
							}
						});

				})
			},
			checkPayStatus() {
				let data = {
					id: this.contract.id
				}
				getPayStatus(data).then(res => {
					if (res.code == 200) {
						this.isPay = res.data.isPay
						if (res.data.isPay == 1) {
							this.sign()
						} else {
							this.pay()
						}
					} else {
						this.pay();
					}
				})
			},
			sign() {
				let data = {
					id: this.contract.id
				}
				addSign(data).then(res => {
					console.log("发起签约  ==> {}", res);
					if (res == 200) {
						this.payStatus = 1
						this.contract.contractStatus = 3
					}
				})
			},

			toPage() {
				this.showFx = true;
				this.make();
			},
			confirmOper() {
				this.modelFlag = true
				this.showModel = false
				this.operate(this.operKind)
			},
			cancelOper() {
				this.modelFlag = false
				this.showModel = false
				this.modelContent = ''
				this.operKind = 0
			},
			//kind: 1.作废协议 2.销账
			operate(kind) {
				this.operKind = kind
				if (!this.modelFlag) {
					if (kind == 1) {
						this.modelContent = '确定要删除？'
					} else if (kind == 2) {
						this.modelContent = '确定要销账？'
					} else if (kind == 3) {
						this.modelContent = '确定要删除？'
					}
					this.showModel = true
				} else {
					let data = {
						id: this.contract.id
					}
					if (this.operKind == 1 || this.operKind == 3) {
						delSign(data).then(res => {
							if (res.code == 200) {
								//this.contract = res.data
								uni.$u.toast("操作成功，即将返回合同列表")
								window.location.href = sigeListUrl
							} else {
								uni.$u.toast(res.msg)
							}
						})
					} else if (this.operKind == 2) {
						endSign(data).then(res => {
							if (res.code == 200) {
								uni.$u.toast("操作成功，即将返回合同列表")
								window.location.href = sigeListUrl
							}
							uni.$u.toast(res.msg)
						})
					}
				}
			},

			toListPage() {
				window.location.href = sigeListUrl
			},

			make() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: shareUrl_sige + this.signNo,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>
<style scoped>
	.repayment-popup {
		padding: 15px;
	}

	.repayment-popup-title {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.repayment-popup-footer {
		display: flex;
		justify-content: space-around;
		padding-top: 15px;
		border-top: 1px solid #f0f0f0;
	}
</style>

<style scoped>
	.fx_page_1 {
		width: 100%;
		right: 0%;

		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.fx_page_1>image {
		width: 100px;
		height: 100px;
		margin-top: 20px;
		margin-right: 20px;
	}

	.repayment-table {
		width: 90%;
		margin: 20px auto;
		border-collapse: collapse;
		text-align: center;
	}

	.repayment-table th,
	.repayment-table td {
		border: 1px solid #e4e4e4;
		padding: 8px;
		font-size: 12px;
		/* 减小字体大小 */
		white-space: nowrap;
		/* 防止文本换行 */
	}

	.repayment-table th {
		background-color: #f5f5f5;
		font-weight: bold;
	}

	.repayment-table tr:nth-child(even) {
		background-color: #f9f9f9;
	}

	.repayment-table tr:hover {
		background-color: #f1f1f1;
	}

	.page_conten_title {
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}

	.group-title {
		background-color: #f5f5f5;
		/* 浅灰色背景 */
		border-left: 4px solid #007aff;
		/* 左侧蓝色边框 */
		padding-left: 10px;
		/* 增加左侧内边距 */
		margin-top: 10px;
		/* 增加顶部外边距 */
		color: #333;
		/* 字体颜色 */
		font-weight: bold;
		/* 字体加粗 */
	}

	/* fx.vue 样式 */
	.fx_overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		/* 半透明黑色背景 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 999;
		/* 确保在最上层 */
	}

	.fx_page {
		width: 100%;
		height: 100vh;
		background: #1C1B20;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fx_page_1 {
		width: 100%;
		right: 0%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.fx_page_1>image {
		width: 100px;
		height: 100px;
		margin-top: 20px;
		margin-right: 20px;
	}

	.fx_page_2 {
		width: 80%;
		margin-top: 60rpx;
		background: #f08a5d;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fx_page_2_title {
		margin-top: 10px;
		font-size: 16px;
		color: #fce38a;
	}

	.fx_page_2_content {
		width: 80%;
		height: 120px;
		margin-top: 30px;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 20px;
	}

	.fx_page_2_btn {
		color: #888888;
		width: 60%;
		margin-bottom: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.money {
		color: #f08a5d;
	}

	.repayment-stage-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.repayment-stage-item:last-child {
		border-bottom: none;
	}

	.repayment-popup-footer {
		display: flex;
		justify-content: space-around;
		padding-top: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.repayment-popup-footer u-button {
		width: 45%;
	}

	.canvas {
		margin-bottom: 60rpx;
	}
</style>